import React, { useEffect } from "react";
import { Modal, Form, Input } from "antd";
import XlSelect from "@/components/Form/XlSelect";
import { modalPropsType } from '@/constants/types';
import { useModel } from "@umijs/max";

const {Item} = Form;
const rules = [{required: true, message: '此项必填'}];
const layout = {
  labelCol: {
    span: 5
  }
}

const ServiceCreateModal = ({title, currentRow, onSubmit, loading, onCancel, visible}: modalPropsType ) => {
  const [form] = Form.useForm();
  const { getDict } = useModel('dictModel');
  const types = getDict('serviceProvider');


  const handleSubmit = async () => {
    const res = await form.validateFields();
    onSubmit(res);
  }

  useEffect(() => {
    if (currentRow?.id) {
      form.setFieldsValue({...currentRow});
    }
  }, [currentRow?.id])
  
  return (
    <Modal
      title={title}
      open={visible}
      width="520px"
      maskClosable={false}
      confirmLoading={loading}
      onOk={handleSubmit}
      onCancel={onCancel}
     >
      <Form form={form} {...layout}>
        <Item name="type" rules={rules} label="类型">
          <XlSelect
            disabled={!!currentRow}
            options={types}
            dataLabel="dictLabel"
            dataValue="dictValue"
          />
        </Item>
        <Item name="fullName" rules={rules} label="公司名称">
          <Input disabled={!!currentRow} />
        </Item>
        <Item name="name" rules={rules} label="公司简称">
          <Input />
        </Item>
        <Item name="code" rules={rules} label="英文简称">
          <Input />
        </Item>
      </Form>
     </Modal>
  );
}
export default ServiceCreateModal;